import React from 'react'
import {connect} from 'dva';
import {DatePicker,Row,Col} from 'antd';
import moment from 'moment';
import DefinitionList from '../../../components/DefinitionList';
import FundSelect from './FundSelect';

const { RangePicker } = DatePicker;

const dateFormat='YYYY-MM-DD'
const nowdate=moment().format(dateFormat)

const PeriodReplayToolBar=({
  begindate,
  enddate,
  firstdate,
  lastdate,
  dispatch,
  periodReplay,
})=>{
  const {
    fundList
  }=periodReplay
  console.log('periodReplay',fundList)
  const onChange=(date, dateString)=> {
    dispatch({
      type:`periodReplay/changeRouter`,
      payload:{
        pathname:'/tradeReplay/periodReplay',
        query:{
          begindate:dateString[0],
          enddate:dateString[1],
        }
      }
    })
  }

  return (
    <Row type="flex" justify="space-between" align="middle">
      <Col style={{marginRight:7}}>
        <DefinitionList  value={<FundSelect fundSelectList={fundList} />} />
      </Col>
      <Col>
         <RangePicker
          value={begindate?[moment(begindate||nowdate, dateFormat), moment(enddate||nowdate, dateFormat)]:false}
          disabledDate={current => firstdate?((current < moment(firstdate)) || (current > moment(lastdate))):false}
          format={dateFormat}
          onChange={onChange}
          allowClear={false}
        />
      </Col>
      
     
    </Row>
    
  )
}

export default connect(({periodReplay}) => ({periodReplay}))(PeriodReplayToolBar)
